<style scoped>
    .wraper {
        padding: 0 20px 60px 20px;
    }

    .search-form {
        overflow: hidden;
    }

    .search {
        padding-bottom: 20px;
    }

    .search span {
        color: #68777c;
        font-weight: bold;
        padding-right: 18px;
    }

    .search button {
        background-color: #00a8f7;
        color: #fff;
        margin-left: 8px;
    }

    .top {
        margin-bottom: 20px;
        border-top: 1px dashed #cccccc;
    }


    .wraper .headline {
        position: relative;
        font-size: 12px;
        color: #303134;
        font-weight: bold;
        margin: 10px 0;
        line-height: 32px;
    }

    .wraper .add-agent {
        position: absolute;
        top: 0px;
        right: 30px;
        background-color: #348bf2;
        color: #fff;
    }

    .iconfont {
        font-size: 14px;
    }

    .red-font {
        color: #ff1f1f;
    }




    .fixed-bottom {
        padding-left: 20px;
        padding-right: 20px;
        height: 80px;
        line-height: normal !important;
        position: fixed;
        left: 210px;
        right: 0;
        bottom: 0;
        z-index: 999;
        text-align: center;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
    }

    .sidehide {
        left: 75px;
    }


    /* 表格样式 start*/

    .pro-card {
        margin-bottom: 10px;
    }

    .pro-card-head {
        background-color: #e6e7eb;
        line-height: 38px;
        border: 1px solid #ddd;
    }

    .pro-card-title {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding-left: 20px;
    }

    .pro-card-headr {
        padding-right: 10px;
        text-align: right;
    }

    .pro-card-content {
        clear: both;
    }

    .pro-paramname {
        text-align: center;
        background-color: #e6e7eb;
        font-size: 14px;
        color: #333;
        border-right: 1px solid #ddd;
    }

    .pro-paramvalue {
        padding-left: 10px;
        border-right: 1px solid #ddd;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .pro-card-contentrow {
        line-height: 40px;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }






    /* 表格样式  end */

    /* 分页 start */

    .page {
        margin: 0;
    }

    .ivu-page {
        padding-bottom: 150px;
    }







    /* 分页 end */

    .receiptbox {
        padding: 10px;
        background-color: #edf2f6;
    }

    .receiptbox .ivu-input-group-append button {
        background-color: #19be6b;
        color: #fff;
    }

    .receiptbox .ivu-input-group {
        top: 0;
    }

    .receiptbox-upload {
        position: relative;
    }

    .receiptbox-upload-input {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }

    .receiptbox .ivu-tag {
        vertical-align: middle;
    }

    .renewal-box {
        margin-left: -16px;
        margin-right: -16px;
        padding: 16px;
        padding-bottom: 0;
        background-color: #cfebf9;
        overflow: hidden;
    }

    .renewal-pro {
        margin-left: -16px;
        margin-right: -16px;
        padding: 12px;
        height: 395px;
        overflow-y: auto;
    }

    .renewal-pro-title {
        padding-left: 15px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        background-color: #edf2f6;
        margin-bottom: 10px;
    }

    .renewal-pro-title b {
        display: inline-block;
        margin-left: 20px;
    }

    .renewal-pro-checkbox {
        font-size: 14px;
        padding-left: 15px;
        border: 1px solid #edf2f6;
        height: 50px;
        line-height: 50px;
        margin-bottom: 10px;
    }

    .renewal-pro-price {
        color: #ff4848;
        font-size: 16px;
        padding-right: 15px;
    }

    .renewal-footer {
        margin: -12px -18px;
        padding: 12px 18px;
        background-color: #f2f2f2;
        overflow: hidden;
    }

    .renewal-footer-l {
        float: left;
    }

    .renewal-footer-r {
        float: right;
    }

    .renewal-total {
        padding-left: 15px;
        color: #ff3d3d;
        font-size: 25px;
    }

    .mod_table {
        margin-right: 22px;
        margin-top: 20px;
        height: 50px;
    }
</style>
<style>
    .a-link {
        color: #4074e1;
        text-decoration: underline;
        cursor: pointer;
    }

    .ivu-table-row-highlight .a-link {
        color: #fff;
    }

    .receiptbox .ivu-tag span.ivu-tag-text {
        max-width: 260px;
        overflow: hidden !important;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .receiptbox .ivu-tag span.ivu-tag-dot-inner,
    .receiptbox .ivu-tag i {
        vertical-align: middle;
    }
</style>



<template>
    <div class="policy-manage">
        <product-title></product-title>
        <div class="wraper">
            <div class="pro-con-f common-box-body">
                <Row>
                    <h3 class="search-h3 huang">
                        快速搜索
                    </h3>
                    <Form :model="searchForm" class="search-form">
                        <Col :xs="24" :sm="12" :md="12" :lg="7">
                            <Form-item label="订单状态">
                                <Select v-model="searchForm.payStatus"  transfer placeholder="请选择">
                                    <Option value="0" key="未支付">未支付</Option>
                                    <Option value="1" key="已完成">已完成</Option>
                                </Select>
                            </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="7">
                            <Form-item label="订单号">
                                <Input clearable size="large" type="text" v-model="searchForm.bizID" placeholder="请输入" />
                            </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="7">
                            <Form-item label="车牌号">
                                <Input clearable size="large" type="text" v-model="searchForm.licenseNo" placeholder="请输入" />
                            </Form-item>
                        </Col>
                        
            
                        <Col :xs="24" :sm="12" :md="12" :lg="7">
                            <Form-item label="车主证件号">
                                <Input size="large" type="text" v-model="searchForm.ownerID" placeholder="请输入" />
                            </Form-item>
                        </Col>
    
   
                        <Col :xs="24" :sm="24" :md="24" :lg="17">
                        <Form-item style="padding-right:0px;">
                            <Button size="large" class="fr" type="primary" icon="ios-search" @click="search">搜索</Button>
                        </Form-item>
                        </Col>
                    </Form>
                    <Col span="24" class="table-action">
                        <Button type="warning" size="large" v-if="$isShow('policy/create')" class="fr" icon="plus" @click="createPloicy">新增</Button>
                    </Col>
                </Row>
            </div>
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme">
                        <Table :loading="tableloading" height="670" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large"
                            stripe highlight-row border :columns="columns1" :data="policylist" class=""></Table>
                    </div>
                </div>
            </div>
        </div>
        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
            <Row class="pro-pagesize">
                <Col :sm="24" :md="12" :lg="14">
                    <!-- <Button type="error" v-if="$isShow('policy/del')" :disabled="tableaction" @click="policyDel" size="large" class="fl mr10 ">删除</Button> -->
                    <Button type="info" v-if="$isShow('policy/update')" :disabled="tableaction" @click="policyEdit" size="large" class="fl mr10">编辑</Button>
                </Col>
                <Col :sm="24" :md="12" :lg="10" class="tRight">
                <Page ref="pages" :current="currentpage" :total="listTotal" show-total show-sizer :page-size="pagesize" @on-change="pageChange"
                    @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                </Col>
            </Row>
        </div>
 
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    import {
        getInsurance
    } from '../../api/api'

    export default {
        data() {
            return {

                tableloading:false,
                tableaction:true,
                currentpage:1,
                closeable: false,
                loading: true,
                page: 1,
                pagesize: 10,
                listTotal: 0,
                searchForm: {
                    page: 1,
                    pagesize: 10,
                    
                },
                
               
                currentRow: {},
                columns1: [{
                        title: '订单号',
                        key: 'bizID',
                        align: 'center',
                    },
                    {
                        title: '车主姓名',
                        key: 'ownerName',
                        align: 'center',
                    },
                    {
                        title: '车牌号',
                        key: 'licenseNo',
                        align: 'center',
                    },
                    {
                        title: '交强险生效日期',
                        key: 'ciBeginDate',
                        align: 'center',
                    },
                    {
                        title: '商业险生效日期',
                        key: 'biBeginDate',
                        align: 'center',
                    },
                    {
                        title: '状态',
                        key: 'payStatus',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', {

                            }, params.row.payStatus == 0 ? '未支付' : '已完成')
                        },
                    },
                    {
                        title: '总保费',
                        key: 'premium',
                        align: 'center',
                    },
                ],
                policylist: [

                ],
            }
        },
        components: {
            productTitle
        },
        computed: {
            slidetoggle() {
                return this.$store.state.sildeshow
            },
            
        },
        watch: {
            
        },

        mounted() {
            this.getList()
        },
        methods: {
            
            policyEdit(){
                this.$router.push({name:'car_order',params:{bizID:this.currentRow.bizID}})
            },
   
            //时间转换
            datachange(date, obj, param) {
                obj[param] = date
            },
            tableCurrentChange(currentRow, oldCurrentRow) {
                console.log(currentRow)
                console.log(oldCurrentRow)
                this.tableaction = false;
                this.currentRow = currentRow
                console.log(this.currentRow)
            },
            // 搜索
            search() {
                this.page = 1
                this.searchForm.page = 1
                this.getList();
            },
            // 获取承保单列表
            getList() {
                this.tableloading = true
                this.tableaction = true
                new Promise((resolve, reject) => {
                    getInsurance(this.searchForm).then(response => {
                        console.log(response.data)
                        if (response.data.status == 200) {
                            this.policylist = response.data.data.dataList;
                            this.listTotal = response.data.data.count;
                            this.tableloading = false
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            // 页码改变
            pageChange(page) {
                this.page = page
                this.searchForm.page = page
                this.getList()
            },
            // 每页条数改变
            pageSizeChange(pagesize) {
                this.pagesize = pagesize
                this.searchForm.pagesize = pagesize
                this.getList();
            },
            del(param) {
                new Promise((resolve, reject) => {
                    delPolicy(param).then(response => {
                        if (response.data.err == 0) {
                            this.getList();
                            this.$Message.success(response.data.info);
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            //新增承保保单
            createPloicy() {
                this.$router.push({
                    name: 'car_offer'
                });
            },
            // 删除时弹出对话框
            policyDel() {
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该保单?',
                    onOk: () => {
                        let _params = {
                            'policy_id': this.currentRow.policy_id
                        }
                        this.del(_params);
                    },
                });
            },
        }
    }
</script>